import React from 'react';

import './App.css';
import {Link, Redirect, Route, Switch} from "react-router-dom";
import RecordPage from "./pages/RecordPage";
import {Layout, Menu} from "antd";
import LivePage from "./pages/LivePage";
import {connect} from 'react-redux'
import {collapseAction} from './actions/AppAction'
import PlaySquareOutlined from "@ant-design/icons/lib/icons/PlaySquareOutlined";
import VideoCameraAddOutlined from "@ant-design/icons/lib/icons/VideoCameraAddOutlined";
import SettingOutlined from "@ant-design/icons/lib/icons/SettingOutlined";
import {withRouter} from 'react-router'
import DevicePage from "./pages/DevicePage";
import HomePage from "./pages/HomePage";
import HomeOutlined from "@ant-design/icons/lib/icons/HomeOutlined";

const {Content, Sider} = Layout;

class App extends React.Component {

  render() {
    return (
      <Layout style={{minHeight: '100vh', display: "flow"}}>
        <Layout>
          <Sider collapsible collapsed={this.props.collapsed} onCollapse={this.props.onCollapse} width={100}>
            <Menu theme="dark" defaultSelectedKeys={this.props.selectedMenuKeys} mode="inline"
                  selectedKeys={this.props.history.location.pathname}>
              <Menu.Item key="home" icon={<HomeOutlined/>}>
                <Link to={'/home_page'}>
                  <span>主页</span>
                </Link>
              </Menu.Item>
              <Menu.Item key="live" icon={<VideoCameraAddOutlined/>}>
                <Link to={'/live_page'}>
                  <span>直播</span>
                </Link>
              </Menu.Item>
              <Menu.Item key="record" icon={<PlaySquareOutlined/>}>
                <Link to={'/record_page'}>
                  <span>
                    录播
                  </span>
                </Link>
              </Menu.Item>
              <Menu.Item key="device" icon={<SettingOutlined/>}>
                <Link to={'/device_page'}>
                  <span>
                    设备
                  </span>
                </Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Content style={{margin: '16px'}}>
              <div style={{padding: 24, background: '#fff', height: '100%'}}>
                <Switch>
                  <Route path={'/home_page'} component={HomePage}/>
                  <Route path={'/record_page'} component={RecordPage}/>
                  <Route path={'/live_page'} component={LivePage}/>
                  <Route path={'/device_page'} component={DevicePage}/>
                  <Redirect to={'/live_page'}/>
                </Switch>
              </div>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    collapsed: state.appReducer.collapsed,
    selectedMenuKeys: state.appReducer.selectedMenuKeys
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onCollapse: () => {
      dispatch(collapseAction())
    },
  }
}

export default withRouter(connect(
  mapStateToProps,
  mapDispatchToProps
)(App));
